import { computed, defineComponent, ref, } from "vue"
import { NModal, NButton, NIcon, NCard, } from "naive-ui"
import { CloseOutlined, FullscreenOutlined } from "@vicons/antd"
import useTableModel from "@/hooks/tablemodel"
import Flexform, { flexformitem } from "@/components/flexform/index"
import Flextalbe from "../../../components/flextable/index"
import Mypage from "@/components/mypage/index"
import useColums from "@/hooks/colums"
import useHttpMessage from "@/hooks/oftenattr"
import { Http } from "@vicons/carbon"
export default defineComponent({
    name: "valueModel",
    setup(props, { expose }) {
        const { formValue,
            loading,
            total,
            tableData,
            editRef,
            pageRef,
            formRef,
            formData,
            handleSearch,
            handleResetForm,
            handleView,
            handleEdit,
            handleCreate,
            refreshDelete, handleInit, handleReset, handleClose, showModel, } = useTableModel()
        const { http, message } = useHttpMessage()
        expose({ handleInit, handleClose, handleReset, formValue })
        // 自定义属性区域
        const title = computed(() => {
            return formData.value ? formData.value.name + "的字典值列表" : "字典值列表"
        })
        const formList = ref([
            {
                span: 6,
                label: "字典名称",
                key: "name",
                default: "",
                type: "input",
                placeholder: "请输入名称",
                disabled: true,
            },
            { slot: (item: flexformitem) => <div class="w-full" />, span: 6, type: "slot" },
            { slot: (item: flexformitem) => <div class="w-full" />, span: 6, type: "slot" },
            {
                slot: (item: flexformitem) => <div class="w-full mt-3px">
                    <NButton size={"small"} onClick={handleSearch}>搜索</NButton></div>, span: 6, type: "slot"
            }
        ])
        const { index, createdTime, changeTime, desc, name, } = useColums()
        const tableColums = ref([index, name, desc, createdTime, changeTime,])
        const getTableDataFunc = (page: number, pageSize: number) => {
            const params = { page, pageSize, parent: formData.value.id || "" }
            http.zidianlist(params).then((res: any) => {
                if (res.data.code === 0) {
                    tableData.value = res.data.items || [];
                    total.value = res.data.total || 0;
                } else {
                    tableData.value = []
                    total.value = 0
                    message.error(res.msg || "获取字典值列表数据失败")
                }
            }).catch((err: Error) => {
                message.error(err.message || "系统错误")
            })
        }
        // 底部按钮插槽
        const action = () => (<div class="flex justify-end items-center my-1">
            <NButton onClick={handleClose}>关闭</NButton>
            <NButton class="ml-10px" type={"primary"}>保存</NButton>
        </div>)
        // 中间主体内容插槽
        const defaulthtml = () => (<div class="w-full flex flex-col">
            <NCard contentStyle={"padding:0"}>
                <Flexform formValue={formData.value} formList={formList.value} />
            </NCard>
            <NCard contentStyle={"padding:0"}>
                <Flextalbe tableData={tableData.value} tableColums={tableColums.value} loading={loading.value} />
            </NCard>
            <NCard contentStyle={{ display: "flex", justifyContent: "center", alignItems: "center", padding: 0 }}>
                <Mypage ref={pageRef} total={total.value} onGet={getTableDataFunc} />
            </NCard>
        </div>)
        // icon标签插槽
        const iconSlot = () => (<div class="w-50px h-20px flex justify-between items-center">
            <NIcon size={20}>
                <CloseOutlined />
            </NIcon>
            <NIcon size={20}>
                <FullscreenOutlined />
            </NIcon>
        </div>)
        return () => (<NModal show={showModel.value} onUpdateShow={(val) => showModel.value = val} preset={"dialog"} title={title.value} showIcon={false} loading={loading.value} v-slots={{ header: null, action: action, default: defaulthtml, icon: iconSlot }}>
        </NModal>)
    },
})
